<template>
  <div class="workorder">
    <div>
      <Crumbs title="开发者社区" sub-title="开发者认证资料管理" />
    </div>
    <div class="main">
      <el-row>
        <el-form :inline="true" :model="formInline">
          <el-form-item label="文档名称">
            <el-input
              v-model="formInline.docName"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="上传人">
            <el-input
              v-model="formInline.createdBy"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              clearable
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="default" @click="reset">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="createDialogVisible = true"
              >新增</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="deletion">批量删除</el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row>
        <el-table :data="tableData" ref="tableref" max-height="520">
          <el-table-column
            type="selection"
            width="40"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column prop="docName" label="文档名称" align="center" />
          <el-table-column prop="fileSize" label="文档大小" align="center" />
          <el-table-column prop="required" label="是否必须" align="center" />
          <el-table-column prop="createdBy" label="上传人" align="center" />
          <el-table-column prop="createdTime" label="上传时间" align="center" />
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button @click="handleClick(scope.row)" type="text"
                >编辑</el-button
              >
              &nbsp;&nbsp;
              <el-popconfirm
                title="是否删除该文档？"
                @confirm="deleteone(scope.row)"
              >
                <el-button type="text" slot="reference">删除</el-button>
              </el-popconfirm>
              &nbsp;&nbsp;
              <el-button type="text" @click="download(scope.row)"
                >下载</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <p>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChangePage"
          :current-page="formInline.pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="formInline.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </p>
    </div>
    <!-- 新增弹窗 -->
    <!-- :file-list="fileList" -->
    <el-dialog
      title="文档新增"
      width="30%"
      :visible.sync="createDialogVisible"
      @close="resetForm('uploadref')"
    >
      <el-form
        :model="uploadform"
        label-width="90px"
        ref="uploadref"
        :rules="uploadrules"
      >
        <el-form-item label="文档名称:" prop="docName">
          <el-input
            v-model="uploadform.docName"
            disabled
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="19">
            <el-form-item label="上传文件" prop="newName">
              <el-input
                v-model="uploadform.newName"
                placeholder=""
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="0" prop="filePath">
              <el-upload
                v-model="uploadform.filePath"
                class="upload-demo"
                action="/api/file/info/addWork"
                multiple
                :show-file-list="false"
                :on-success="uploadsuccess"
                :on-error="uploadError"
              >
                <el-button size="" type="primary">选择</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否必须:" prop="required">
          <el-select
            v-model="uploadform.required"
            placeholder="请输入是否必须"
            style="width: 100%"
          >
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="create">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 编辑 -->
    <el-dialog title="文档编辑" width="30%" :visible.sync="editDialogVisible">
      <el-form
        :model="editform"
        label-width="90px"
        :rules="uploadrules"
        ref="editref"
      >
        <el-form-item label="文档名称:" prop="docName">
          <el-input
            v-model="editform.docName"
            disabled
          ></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="19">
            <el-form-item label="上传文件" prop="newName">
              <el-input
                v-model="editform.newName"
                placeholder=""
                disabled
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label-width="0" prop="filePath">
              <el-upload
                v-model="editform.filePath"
                class="upload-demo"
                action="/api/file/info/addWork"
                multiple
                :show-file-list="false"
                :on-success="uploadsuccessedit"
                :on-error="uploadError"
              >
                <el-button size="" type="primary">选择</el-button>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="是否必须:" prop="required">
          <el-select
            v-model="editform.required"
            placeholder="请输入是否必须"
            style="width: 100%"
          >
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="putsub">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      uploadrules: {
        docName: [{
          required: true,
          message: '请输入文档名称',
          trigger: 'change'
        },],
        newName: [{
          required: true,
          message: '文件必须上传',
          trigger: 'change'
        },],
        required: [{
          required: true,
          message: '请选择是否必须',
          trigger: 'change'
        },],
      },
      editrules: {
        docName: [{
          required: true,
          message: '请输入文档名称',
          trigger: 'change'
        },],
        required: [{
          required: true,
          message: '请选择是否必须',
          trigger: 'change'
        },],
      },
      total: 0,
      date: [],
      formInline: {
        docName: "",
        createdBy: "",
        // beginDate: "",
        // finishDate: "",
        pageNum: 1,
        pageSize: 10
      },
      uploadform: {
        docName: "",
        newName: "",
        filePath: "",
        required: "",
        fileSize: ""
      },
      editform: {
        docName: "",
        newName: "",
        filePath: "",
        required: "",
        fileSize: ""
      },
      tableData: [],
      createDialogVisible: false, //是否显示新建窗口
      editDialogVisible: false, //是否显示编辑窗口
    };
  },
  created () {
    this.loadData();
  },
  methods: {
    // 上传失败
    uploadError (err, file, fileList) {
      this.$message.error(JSON.parse(err.message).msg)
    },
    // 下载
    download (row) {
      this.$util.download(`/api/file/info/download/${row.fileId}`)
    },
    // 批量删除
    deletion () {
      if (this.$refs.tableref.selection.length == 0) {
        this.$message({ type: "warning", message: '未选择行数据' })
        return
      }
      this.$confirm('此操作将批量删除文档，是否继续?', '提示', { type: 'warning' })
        .then(() => {
          let data = []
          // 拿到参数
          this.$refs.tableref.selection.forEach(item => {
            data.push(item.fileId)
          })
          data = data.toString()
          this.$http({ url: `/api/file/info/delete/${data}` })
            .then(res => {
              this.loadData()
            })
        }).catch(() => {
          this.$message.info('删除取消')
        })

    },
    deleteone (data) {
      this.$http({ url: `/api/file/info/delete/${data.fileId}` })
        .then(res => {
          this.loadData()
        })
    },
    resetForm (form) {
      this.$refs[form].resetFields()
    },
    uploadsuccess (response, file, fileList) {
      console.log(response, file, fileList)
      this.uploadform.newName = file.name
      this.uploadform.docName = file.name.substring(0,file.name.lastIndexOf('.'))
      this.uploadform.filePath = file.response.path
      // 文件大小
      this.uploadform.fileSize = (file.size / 1024 / 1024).toFixed(2) + 'M'
    },
    uploadsuccessedit (response, file, fileList) {
      this.editform.newName = file.name
      this.editform.docName = file.name.substring(0,file.name.lastIndexOf('.'))
      this.editform.filePath = file.response.path
      // 文件大小
      this.editform.fileSize = (file.size / 1024 / 1024).toFixed(2) + 'M'
    },
    create () {
      // 校验
      this.$refs.uploadref.validate((valid) => {
        if (valid) {
          this.uploadform.businessType = '0'
          this.uploadform.fileType = '0'
          // delete this.uploadform.newName
          // 新增的接口
          this.$http({
            url: "/api/file/info",
            method: 'post',
            data: this.uploadform
          }).then(res => {
            this.createDialogVisible = false
            this.loadData()
            this.$message.success('新增模板成功！')
          })
        }
      })

    },
    onSubmit () {
      this.formInline.pageNum = 1
      this.loadData()
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },

    reset () {
      this.formInline.docName = "";
      this.formInline.createdBy = "";
      // this.formInline.beginDate = "";
      // this.formInline.finishDate = "";
      this.date = []
      this.formInline.pageNum = 1
      this.loadData()
    },
    handleClick (row) {
      console.log(row)
      this.editDialogVisible = true;
      this.editform.docName = row.docName
      // this.editform.newName = row.newName
      this.editform.newName = `${row.docName}${row.newName.substring(row.newName.lastIndexOf('.'),row.newName.length)}`
      this.editform.filePath = row.filePath
      this.editform.required = row.required
      this.editform.fileSize = row.fileSize
      this.editform.fileId = row.fileId
    },
    handleSizeChange (newSize) {
      this.formInline.pageNum = 1
      this.formInline.pageSize = newSize
      this.loadData()
    },
    handleCurrentChangePage (newPage) {
      this.formInline.pageNum = newPage
      this.loadData()
    },
    loadData () {
      this.formInline.beginDate = this.date[0]
      this.formInline.finishDate = this.date[1]
      console.log(this.formInline)
      this.$http({
        url: '/api/file/info/listApprove',
        method: 'post',
        data: this.formInline
      }).then(res => {
        this.tableData = res.data.rows
        this.total = res.data.total
      })
    },
    // 编辑的确定
    putsub () {
      // 
      this.$refs.editref.validate((valid) => {
        if (valid) {
          this.$http({
            url: "/api/file/info/update",
            method: 'post',
            data: this.editform
          }).then(res => {
            console.log(res, '111')
            this.editDialogVisible = false
            this.loadData()
          })
        }
      })

    }
  },
};
</script>

<style lang="scss" scoped>
.workorder {
  height: calc(100vh - 100px);
  background-color: #f8f8f8;
  padding: 5px 30px 10px;

  .main {
    height: 92%;
    background-color: white;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 20px;
  }
}
</style>
